<!-- 从业者-我的 -->
<template>
	<view class="my-page">
		<!-- 顶部用户信息区域 -->
		<view class="user-info" @click="navigateTo('registerthree')">
			<!-- 头像 -->
			<view class="info-left">
				<!-- <u-avatar size="160" mode="square" :src="userInfo.header_img_uri[0].url"></u-avatar> -->
				<image :src="avatarUrl" class="avatar" mode="aspectFill"></image> 
			</view>
			<view class="info-right">
				<view class="company-name">{{ userInfo.jlbi_name ? userInfo.jlbi_name : userInfomation.user_realname }}</view>
				<view class="licenseStatus">{{ maskPhoneNumber(userInfo.jlbi_phoneno) }}</view>
				<!-- <view class="licenseStatus">{{ maskPhoneNumber(uni.getStorageSync('phone')) }}</view> -->
			</view>
			<view @click="navigateTo('personMesume')">
				<u-section :show-line="false" sub-title="简历信息"></u-section>
			</view>
		</view>

		<!-- 图文导航 -->
		<view class="dial-nav">
			<dial-nav marginTopLine='22rpx' imgSize='84rpx' :mode="4" :list="dialNavList"></dial-nav>
		</view>

		<!-- 功能列表 -->
		<view class="function-list">
			<!-- 分享赚佣金 -->
			<u-cell-item icon="edit-pen" title="分享赚佣金" @click="navigateTo('shapeBrokerage')"></u-cell-item>

			<!-- 我的订单 -->
			<u-cell-item icon="server-fill" title="我的订单" @click="navigateTo('myOrder')"></u-cell-item>

			<!-- 联系客服 -->
			<u-cell-item icon="server-fill" title="联系客服" @click="navigateTo('makePhoneCall')"></u-cell-item>

			<!-- 收件地址 -->
			<u-cell-item icon="server-fill" title="收件地址" @click="navigateTo('address')"></u-cell-item>

			<!-- 关于我们 -->
			<u-cell-item icon="setting-fill" title="关于我们" @click="navigateTo('aboutOut')"></u-cell-item>

			<!-- 账号与设置 -->
			<u-cell-item icon="setting-fill" title="账号与设置" @click="navigateTo('userSetting')"></u-cell-item>
		</view>

		<!-- 自定义tabtar -->
		<u-tabbar v-model="current" :show="show" :bg-color="bgColor" :border-top="borderTop" :list="list"
			:mid-button="midButton" :inactive-color="inactiveColor" :activeColor="activeColor" @change="change"></u-tabbar>

	</view>
</template>

<script>
	import DialNav from '@/components/nav/dial-nav.vue';
	export default {
		components: {
			DialNav
		},
		data() {
			return {
				userInfo: {
					avatar: 'https://cdn.uviewui.com/uview/template/niannian.jpg',
					name: '用户姓名',
					phone: '156****6666',
					companyType: '养老院',
					businessStatus: '营业中',
					licenseStatus: 'XXXXXX证书'
				},
				userInfomation: {},
				// 顶部导航
				dialNavList: [{
						img: require('static/nav/nav-community.png'),
						name: '钱包',
						url: 'pages/Practitioner/money/index',
						params: {}
					},
					{
						img: require('static/nav/nav-recommond.png'),
						name: '积分',
						url: 'pages/Practitioner/mine/integral',
						params: {}
					},
					{
						img: require('static/nav/nav-points.png'),
						name: '考证记录',
						url: 'pages/Practitioner/examination/examination',
						params: {}
					},
					{
						img: require('static/nav/nav-points.png'),
						name: '学习管理',
						url: 'pages/Practitioner/studyManage/studyManage',
						params: {}
					}

				],
				// 底部tabtar
				list:'',
				current: 4,
				show: true,
				bgColor: '#F1F7F7',
				borderTop: true,
				midButton: false,
				inactiveColor: '#516178',
				activeColor: '#03B8CD'
			}
		},
		computed: {
		  avatarUrl() {
		    return this.userInfo?.header_img_uri?.[0]?.url || '/static/img_yonghu.png';
		  }
		},
		onLoad(){
			this.list = [{
						iconPath: "/static/xuexi_1.png",
						selectedIconPath: "/static/xuexi_2.png",
						text: '在线学习',
						count: 0,
						isDot: true,
						customIcon: false,
					},
					{
						iconPath: "/static/kaozheng_1.png",
						selectedIconPath: "/static/kaozheng_2.png",
						text: '考证培训',
						customIcon: false,
					},
					{
						iconPath: "/static/qiuzhi_1.png",
						selectedIconPath: "/static/qiuzhi_2.png",
						text: '个人求职',
						midButton: true,
						customIcon: false,
					},
					{
						iconPath: "/static/jingsai_1.png",
						selectedIconPath: "/static/jingsai_2.png",
						text: '职业竞赛',
						customIcon: false,
					},
					{
						iconPath: "/static/wode_1.png",
						selectedIconPath: "/static/wode_2.png",
						text: '我的',
						count: 0,
						isDot: false,
						customIcon: false,
					},
				]			
		},
		onShow() {
			// 查询登录用户信息
			// this.getLoginUserInfo()
			// 查询个人简历缩减信息
			this.getJlsimple()
			
		},		
		methods: {
			
			// 查询个人简历缩减信息
			getJlsimple() {
				this.$u.api.queryjlsimple({
					"usercode" : uni.getStorageSync('usercode')
				}).then(res => {
					console.log('simple:', res)
					this.userInfo = res.data.base_info.base					
					this.userInfo.jlbi_phoneno = uni.getStorageSync('phone') ? uni.getStorageSync('phone') : this.userInfo.jlbi_phoneno
					if(!this.userInfo.jlbi_name) {
						this.selectUserInfo()
					}
				})
			},
			// 当简历为空时，起用获取用户注册信息
			selectUserInfo() {
				this.$u.api.queryuserinfo({
					"usercode": uni.getStorageSync('usercode')
				}).then(res => {
					console.log('基础信息：', res)
					this.userInfomation = res.data.base_info
				}).catch(err => {
					
				})
			},
			
			navigateTo(page) {
				// 实际项目中替换为你的页面路径
				const routes = {
					'aboutOut': '/pages/test/service',
					'address': '/pages/Practitioner/mine/address',
					'organSetting': '/pages/Practitioner/mine/practitionerSetting',
					'userSetting': '/pages/Practitioner/mine/practitionerSetting',
					'makePhoneCall': '/pages/Institution/mine/makePhoneCall',
					'myOrder': '/pages/Practitioner/myOrder/myOrder',
					'shapeBrokerage': '/pages/Practitioner/mine/shapeBrokerage',
					'personMesume': `/pages/Practitioner/personMesume/personMesume?usercode=${uni.getStorageSync('usercode')}`
				}
				uni.navigateTo({
					url: routes[page]
				})
			},
			
			// 将手机号中间转为星号
			maskPhoneNumber(phone) {
			  return String(phone).replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
			},
			
			contactService() {
				uni.makePhoneCall({
					phoneNumber: '400-123-4567'
				})
			},
			// 底部tabBar切换
			change(index) {
				// this.$u.toast(`点击了第${index}项`);
				if (index == 0) {
					// 当前页为在线课程
					this.current = 0;
					uni.reLaunch({
						url: '/pages/Practitioner/learning/learning'
					});
				} else if (index == 1) {
					// 当前页为考证培训
					this.current = 1;
					uni.reLaunch({
						url: '/pages/Practitioner/examTrain/examTrain'
					});
				} else if (index == 2) {
					// 当前页为考证培训
					this.current = 2;
					uni.reLaunch({
						url: '/pages/Practitioner/applyJob/applyJob'
					});
				} else if (index == 3) {
					// 当前页为职业竞赛
					this.current = 3;
					uni.reLaunch({
						url: '/pages/Practitioner/prizeFight/prizeFight'
					});
				} else if (index == 4) {
					// 当前页为我的
					this.current = 4;
					uni.reLaunch({
						url: '/pages/Practitioner/mine/mine'
					});
				}

				// console.log("tabindex:", index)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.my-page {
		padding: 20rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.user-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		background-color: #fff;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		
		.info-left {
			width: 99px;
			height: 99px;
		}
		.avatar {
			width: 99px;
			height: 99px;
		}

		.info-right {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			margin-left: 20px;


			.company-name {
				font-size: 36rpx;
				font-weight: bold;
				margin-bottom: 10rpx;
			}

			.phone {
				font-size: 28rpx;
				color: #666;
				margin-bottom: 10rpx;
			}

			.company-type {
				font-size: 26rpx;
				color: #888;
			}
		}
	}

	.certification {
		background-color: #fff;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		padding: 0 30rpx;

		.cert-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 100rpx;
			font-size: 28rpx;

			.cert-status {
				color: #19be6b;
			}
		}
	}

	.dial-nav {
		margin: 0px 0px 10px 0px;

	}


	.function-list {
		background-color: #fff;
		border-radius: 16rpx;

		/deep/ .u-cell {
			padding: 28rpx 30rpx;
		}

		/deep/ .u-cell__body {
			padding: 0;
		}

		/deep/ .u-cell__value {
			color: #f56c6c;
		}
	}
</style>